<template>
  <div class="creator">
    <PreviewHead v-model="identity"></PreviewHead>
    <TopHeader
      :show-more="false"
      @back="emits('toPage', 2, 'profile')"
      @share="shareLink"
      class="header-lower"
    ></TopHeader>
    <div class="personal bg-background">
      <div class="bg">
        <EncryptImage :src="userData.background_img" object-fit="cover" click-to-full></EncryptImage>
      </div>
      <div class="content">
        <AvatarContainer :avatar="userData.avatar" :vip="isVip">
          <template #buttons>
            <Icon size="32" name="chatBg"></Icon>
            <Icon size="32" name="moneyBg"></Icon>
            <FollowButton class="personal-btn"></FollowButton>
          </template>
        </AvatarContainer>
        <CreatorInfo
          :username="userData.username"
          :display-name="userData.nickname"
          :vip="isVip"
          :fans="userData.fans"
          :post="userData.post"
          :watches="userData.view"
          :description="userData.bio"
          :link-instagram="userData.link_instagram"
          :link-tiktok="userData.link_tiktok"
          :link-twitter="userData.link_twitter"
          :link-vida="userData.link_vida"
        ></CreatorInfo>
        <div class="mx-4 gap-col-16" v-show="identity === IDENTITY.VISITOR">
          <BlockButton
            :label="$t('label.subscribeBtn', { price: toFixedString(userData.subscribe_price, 2) })"
          ></BlockButton>
        </div>
        <div class="media mt-4">
          <MediaWall
            v-model="media"
            :subs-data="fetcher.subs.dataList"
            :shop-data="fetcher.shop.dataList"
            :free-data="fetcher.free.dataList"
            :subs-loading="fetcher.subs.loading"
            :shop-loading="fetcher.shop.loading"
            :free-loading="fetcher.free.loading"
            :subs-no-more="fetcher.subs.noMore"
            :shop-no-more="fetcher.shop.noMore"
            :free-no-more="fetcher.free.noMore"
            :preview-mode="true"
            :preview-visitor="identity === IDENTITY.VISITOR"
            @intersect="fetcher[`${mediaType}`].nextPage"
          ></MediaWall>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, provide, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useAccountStore } from '@/store/account'
import { toFixedString } from '@/utils/string-helper'
import BlockButton from '@/components/button/BlockButton.vue'
import AvatarContainer from '@/components/layout/creator/AvatarContainer.vue'
import CreatorInfo from '@/components/layout/creator/CreatorInfo.vue'
import TopHeader from '@/components/layout/creator/TopHeader.vue'
import MediaWall from '@/components/media/MediaWall.vue'
import PreviewHead from '@/components/mine/PreviewHead.vue'
import EncryptImage from '@/components/multimedia/EncryptImage.vue'
import FollowButton from '@/components/viewer/stateful/FollowButton.vue'
import { useInfinite } from '@/compositions/request/infinite'
import { useCopyToClipboard } from '@/compositions/utils/copyToClipboard'
import { FEED_PERMISION, IDENTITY, MEDIA_TYPE } from '@/constant'
import API from '@/http'

const accountStore = useAccountStore()
const { userData, isVip } = storeToRefs(accountStore)
provide('creator', userData)
console.log('userData', userData.value)

const emits = defineEmits(['toPage'])

defineProps({
  id: { type: Number, defualt: 0 },
})

const media = ref(MEDIA_TYPE.SUBS)
const identity = ref(IDENTITY.VISITOR)

const fetcher = ref({
  free: useInfinite({
    request: API.Media.getPostList,
    params: { aff: userData.value.aff, visible: FEED_PERMISION.ALL },
  }),
  subs: useInfinite({
    request: API.Media.getPostList,
    params: { aff: userData.value.aff, visible: FEED_PERMISION.SUB },
  }),
  shop: useInfinite({
    request: API.Media.getPostList,
    params: { aff: userData.value.aff, visible: FEED_PERMISION.SHOP },
  }),
})
fetcher.value.free.init()
fetcher.value.subs.init()
fetcher.value.shop.init()

const mediaType = computed(() =>
  media.value === MEDIA_TYPE.SUBS ? 'subs' : media.value === MEDIA_TYPE.SHOP ? 'shop' : 'free',
)

// 複製連結
const { copy } = useCopyToClipboard()
async function shareLink() {
  copy(userData.value.share_url)
}
</script>

<style lang="scss" scoped>
.creator {
  width: 100%;
  height: 100%;
  position: relative;
  overflow-x: hidden;
}

.personal {
  width: 100%;
  min-height: 100%;

  .bg {
    width: 100%;
    height: 9.5625rem;
    color: mediumorchid;
    background-color: cadetblue;
  }

  .content {
    height: calc(100% - 40.8vw + 2.5rem);
    transform: translateY(-2.5rem);
  }
}

.header-lower {
  top: 2.5rem;
}
</style>
